<template>
  <div class="persona-fm">
    <div class="playview-wrap mtop-20">
      <div class="playview-left">
        <div class="img-wrap">
          <img :src="imgInfo.imgUrl" alt="" class="img img-h" />
          <div
            class="play-btn pointer"
            @click="pause"
            :class="{ 'play-btn_active': isPlay }"
          >
            <i v-show="!isPlay" class="iconfont icon-bofang"></i>
            <i v-show="isPlay" class="iconfont icon-zanting"></i>
          </div>
        </div>
        <div class="btn-wrap mtop-20">
          <button class="pfm-btn " @click="likeMusic">
            <i class="iconfont icon-aixin" v-show="!isLiked"></i>
            <i
              class="iconfont icon-aixin1"
              v-show="isLiked"
              style="color: red"
            ></i>
          </button>
          <el-popconfirm title="确定将当前音乐移到垃圾桶吗？" @confirm="remove">
            <el-button slot="reference" class="pfm-btn"
              ><i class="el-icon-delete det"></i
            ></el-button>
          </el-popconfirm>
          <button class="pfm-btn" @click="nextMusic">
            <i class="iconfont icon-xiayishou"></i>
          </button>
          <button class="pfm-btn"><i class="el-icon-more"></i></button>
        </div>
      </div>
      <div class="playview-right">
        <div class="title">
          <span class="font-24">{{ imgInfo.name }}</span>
        </div>
        <div class="info">
          <div class="font-12">
            专辑：<span
              @click="toAblumDetail(imgInfo.album.id)"
              class="btn-a pointer"
              >{{ imgInfo.album.name }}</span
            >
          </div>
          <div class="font-12">
            歌手：<span
              @click="toArtistDetail(imgInfo.author.id)"
              class="btn-a pointer"
              >{{ imgInfo.author.name }}</span
            >
          </div>
        </div>
        <LyricWrap
          :currenTime="currenMusicInfo.currenTime"
          :musicId="currenMusicId"
        ></LyricWrap>
      </div>
    </div>
    <div class="comment-view mtop-50">
      <CommentList :hotCommentList=" hotCommentList" :newCommentList="newCommentList"></CommentList>
    </div>
  </div>
</template>

<script>
import { likeMusic , getHotComment , getComment } from "@/api/request";
import LyricWrap from "@/components/player/LyricWrap.vue";
import CommentList from "@/components/list/commentList.vue";
import { mapState } from "vuex";
export default {
  components: {
    LyricWrap,
    CommentList,
  },
  data() {
    return {
      //歌曲图片信息，歌名，歌手
      imgInfo: {
        imgUrl: "",
        name: "未知歌名",
        author: {
          name: "未知歌手名",
          id: 0,
        },
        album: {
          name: "未知专辑名",
          id: 0,
        },

      },
      hotCommentList:[],
      newCommentList:[],
      newQueryInfo:{
        type: 0,
        pageNo: 1,
        pageSize: 10,
        sortType: 3,
        cursor: 0,
      },
      total:0,
    };
  },
  computed: {
    ...mapState([
      "isPlay",
      "currenMusicId",
      "currenIndex",
      "musicList",
      "currenMusicInfo",
      "historyList",
      "likeIdList",
      "isLogin",
      "playType",
    ]),
    isLiked: {
      get() {
        return this.likeIdList.indexOf(this.currenMusicId) !== -1;
      },
      set(val) {
        if (this.isLiked) {
          this.$store.commit("setLikeIdList", {
            type: "remove",
            data: val,
          });
        } else {
          this.$store.commit("setLikeIdList", {
            type: "unshift",
            data: val,
          });
        }
      },
    },
  },
  watch: {
    currenMusicId: {
      immediate: true,
      handler(val) {
        if (val != 0 && this.playType === "personalFm") {
          this.getImgInfo();
          this.getHotCommentList();
          this.getNewCommentList();
        }
      },
    },
  },
  created() {
    this.getPersonalFm();
  },
  methods: {
    getImgInfo() {
      if (this.musicList[this.currenIndex]?.al.picUrl) {
        this.imgInfo.imgUrl = this.musicList[this.currenIndex].al.picUrl;
      } else {
        this.imgInfo.imgUrl =
          "https://cdn.jsdelivr.net/gh/crazybox521/blogImg/music.jpg";
      }
      this.imgInfo.author.name = this.musicList[this.currenIndex].ar[0].name;
      this.imgInfo.author.id = this.musicList[this.currenIndex].ar[0].id;
      this.imgInfo.album.name = this.musicList[this.currenIndex].al.name;
      this.imgInfo.album.id = this.musicList[this.currenIndex].al.id;
      this.imgInfo.name = this.musicList[this.currenIndex].name;
    },
    getPersonalFm() {
      if (this.playType !== "personalFm") {
        this.$store.dispatch("getPersonalFm", { type: "get" });
      }
    },
    pause() {
      this.$store.commit("setPlayState", !this.isPlay);
    },
    toAblumDetail(id) {
      this.$router.push("/albumdetail/" + id);
    },
    toArtistDetail(id) {
      this.$router.push("artistdetail/" + id);
    },
    async likeMusic() {
      if(!this.isLogin) return this.$message.error('需要登录');
      if(this.currenMusicId == 0 || typeof this.currenMusicId === 'undefined') return;
      const {data:res} = await likeMusic(this.currenMusicId , !this.isLiked);
      if(res.code !== 200) return;
      this.$message.success(`${this.isLiked ? '取消喜欢' : '喜欢'}成功`);
      this.isLiked = this.currenMusicId;
      console.log(this.isLiked);
    },
    remove() {
      this.$store.dispatch('getPersonalFm',{
        type : 'remove',
        id: this.currenMusicId
      })
    },
    nextMusic(){
      this.$store.dispatch('getPersonalFm',{
        type:'next'
      })
    },
    //获取热门评论
    async getHotCommentList(){
      const {data:res} = await getHotComment(this.currenMusicId , 0 , 5);
      if(res.code !== 200) return;
      this.hotCommentList = res.hotComments;
    },
    //获取最新评论
    async getNewCommentList(){
      const {data:res}  = await getComment({id:this.currenMusicId,...this.newQueryInfo});
      console.log(res);
      if(res.code !== 200) return;
      this.newCommentList = res.data.comments;
      this.total = res.data.totalCount;
      this.newQueryInfo.cursor = res.data.cursor;
    }
  },
};
</script>

<style lang="less" scoped>
.persona-fm {
  width: 710px;
  margin: 0 auto;
}
.playview-wrap {
  display: flex;
}
.playview-left {
  margin-top: 120px;
  width: 260xp;
  .img-wrap {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #eeeeee;
    height: 260px;
    width: 260px;
    border-radius: 10px;
    .img {
      border-radius: 10px;
    }
    .play-btn {
      position: absolute;
      right: 105px;
      bottom: 105px;
      background-color: #fbf7f6;
      color: #ec4141;
      box-sizing: border-box;
      border: 1px solid #eeeeee;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.8s;
      i {
        font-size: 20px;
      }
    }
    .play-btn_active {
      right: 15px;
      bottom: 15px;
    }
  }
  .btn-wrap {
    display: flex;
    justify-content: space-between;
    .pfm-btn {
      outline: none;
      border: 1px solid #e7e7e7;
      background-color: #fff;
      color: #8c8c8c;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      &:hover {
        background-color: #f5f5f5;
      }
      i {
        font-size: 20px;
      }
    }
    .det{
      margin-left: -10px;
    }
  }
}
.playview-right {
  margin-left: 30px;
  width: 400px;
  .info {
    margin-top: 10px;
    .btn-a {
      color: #5d86b5;
    }
  }
}
</style>